.calendar-icon {
   @include margin-position(-1.5em,0.75em);
}
.calendar{
  @include absolute-position(3.5em, 0);
  box-shadow: $dropdown-shadow;
  font-size: 0.8rem;
  font-weight: normal;
  user-select: none;

  .calendar-title {
    padding: $dropdown-padding;
    display: flex;
    align-items: center;
    border-bottom: $dropdown-seperator;
    .angle-double-left,.angle-left,.angle-right, .angle-double-right {
      color: $gray-500;
      @include size(1.5em, 1em);
      @include hover($white, $black, pointer);
    }
    .calendar-month {
      margin: 0 auto;
    }
  }
  table {
    margin: $dropdown-padding;
    th,td {
      @include table-cell(2.5em, 2.5em);
    }
    td {
      @include hover($info, $black, pointer);
    }
    td.invalid {
      color: $gray-500;
      @include hover($white, $gray-500, default);
    }
    td.today {
      background-color: lighten($success, 25%);
    }
    td.current {
      background-color: lighten($primary, 25%);
    }
  }
  .calendar-botton {
    border-top: $dropdown-seperator;
    padding: $dropdown-padding;
    text-align: center;
    @include hover($white, $primary, pointer);
  }
}